<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>树控件--K_Tree演示范例</title>
<script language="javascript" charset="UTF-8" src="../../src/step1tree.js"></script>
<script language="javascript" charset="UTF-8" src="../../testdata/placelist.js"></script>
<style type="text/css">
#tree_div{position:relative;width:200px;height:400px;border:solid 1px red}
</style>
<script language="javascript">
	function onLoad()
	{
		var treeData=new K_TreeDataJson(window.K_PLD);//使用XML数据创建一个树的数据源
		//自定义从json对象(node)创建item的函数
		treeData.getItemByNode=function(node)
		{
			var item=new K_TreeItem();
			item.text=node.a.n.replace(",","");//数据之中地名采用逗号分隔的形式，这里去掉逗号
			item.id=node.py;//采用拼音作为数据ID
			return item;
		}
		new K_TreeView(treeData,"tree_div");//将数据源显示成多级下拉选单
	}
</script>
</head>
<body onload="onLoad()">
<h3>树控件--K_Tree演示范例</h3>

<div id="tree_div"></div>

<div style="margin:10px;padding:10px;background-color:#EEEEEE;">
这是使用K_Tree实现的树控件，有以下特性：
<ol>
<li>本控件界面模仿http://ditu.google.cn之中的功能，不过仅仅实现了树相关部分的UI，而没有实现的完全相同;</li>
<li>点击任意的项目，将会触发事件，用户可以捕获该事件，指定其他操作，例如在选择地名的同时定位地图;</li>
<li>本控件使用样式表来定义显示界面;</li>
</ol>
</div>

</body>
</html>